<!--
 * @Description: 通讯录
 * @Author: Lxc
 * @Date: 2021-09-10 17:25:01
 * @LastEditors: Lxc
 * @LastEditTime: 2021-09-15 17:46:38
-->
<template>
  <view>
    <view class="address-book-wrap page-content">
      <CascadePicker
        class="page-header"
        :popupConfig="popupConfig"
        :activeId="activeId"
        :leftList="leftList"
        :rightTitle="rightTitle"
        :selectList="selectList"
        :selectData="selectData"
        @selectHandle="selectHandle"
        @selectTab="selectTab"
        @radioChange="radioChange"
        @submit="submit"
      />
      <view
        class="select-department"
        v-if="
          levelVisible &&
            ((accountId != 1 && nbTitle == '内部通讯录') ||
              nbTitle != '内部通讯录')
        "
      >
        <image class="bumen-img" src="@/static/images/department.png" alt="" />
        <text>{{ departmentName }}</text>
      </view>
      <SearchBar ref="searchBar" class="page-header" />
      <view class="address-book-list">
        <view v-if="!levelVisible">
          <view
            v-for="item of firstLevelList"
            :key="item.id"
            class="contacts-item"
            @click="showDetail(item)"
          >
            <view class="contacts-content">
              <image
                class="contacts-img"
                src="@/static/images/bumen.png"
                alt=""
              />
              <text class="contacts-label">{{ item.label }}</text>
            </view>
            <uni-icons type="arrowright" color="#707070"></uni-icons>
          </view>
        </view>
        <view v-else-if="levelVisible">
          <view
            class="detail-item"
            v-for="(item, index) of addressList"
            :key="index"
          >
            <view class="detail-cont">
              <image
                class="account-icon"
                v-if="
                  nbTitle != '内部通讯录' ||
                    (nbTitle == '内部通讯录' && accountId == 2)
                "
                src="@/static/images/contacts.png"
                alt=""
              />
              <image
                class="mechanism-icon"
                v-else-if="nbTitle == '内部通讯录' && accountId == 1"
                src="@/static/images/mechanism.png"
                alt=""
              />
              <view class="detail-label">
                <view class="detail-name">{{ item.label }}</view>
                <view class="detail-job" v-if="item.job">{{ item.job }}</view>
              </view>
            </view>
            <text class="iconfont icon-hujiao"></text>
          </view>
          <view v-if="nextLevelList.length > 0">
            <view
              v-for="item of nextLevelList"
              :key="item.id"
              class="contacts-item"
              @click="showDetailItem(item)"
            >
              <view class="contacts-content">
                <image
                  class="contacts-img"
                  v-if="
                    nbTitle != '内部通讯录' ||
                      (nbTitle == '内部通讯录' && accountId == 2)
                  "
                  src="@/static/images/bumen.png"
                  alt=""
                />
                <image
                  class="division-img"
                  v-else-if="nbTitle == '内部通讯录' && accountId == 1"
                  src="@/static/images/division.png"
                  alt=""
                />
                <text class="contacts-label">{{ item.label }}</text>
              </view>
              <uni-icons type="arrowright" color="#707070"></uni-icons>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import SearchBar from "@/components/searchBar";
import CascadePicker from "@/pages/mailList/components/cascadePicker.vue";
export default {
  components: { SearchBar, CascadePicker },
  data() {
    return {
      nbTitle: "",
      popupConfig: {},
      activeId: 0,
      selectId: 0,
      leftList: [
        {
          value: "1",
          name: "选择省",
        },
        {
          value: "2",
          name: "选择市",
        },
        {
          value: "3",
          name: "选择区县",
        },
        {
          value: "4",
          name: "选择街道",
        },
      ],
      rightTitle: "末级机构名称",
      selectList: [],
      selectData: [],
      sortList: [],
      firstLevelList: [
        {
          id: 1,
          label: "所选机构一级部门",
        },
        {
          id: 2,
          label: "所选机构一级部门",
        },
        {
          id: 3,
          label: "所选机构一级部门",
        },
      ],
      levelVisible: false,
      departmentName: "",
      addressList: [
        {
          label: "王小明",
          mechanism: "末级机构",
          department: "末级部门",
          job: "职务",
        },
        {
          label: "王小明",
          mechanism: "末级机构",
          department: "末级部门",
          job: "职务",
        },
        {
          label: "王小明",
          mechanism: "末级机构",
          department: "末级部门",
          job: "职务",
        },
      ],
      nextLevelList: [
        {
          id: 1,
          label: "所选机构二级部门",
        },
        {
          id: 2,
          label: "所选机构二级部门",
        },
        {
          id: 3,
          label: "所选机构二级部门",
        },
      ],
      accountId: 2, // 1机构账号、2人员账号
    };
  },
  onLoad(option) {
    uni.setNavigationBarTitle({
      title: option.id == 1 ? '政务通讯录' : option.id == 2 ? '内部通讯录' : '应急通讯录'
    });
    if (option.id == 2 && this.accountId == 1) {
      this.levelVisible = true;
      this.addressList = [
        {
          label: "所选机构账号",
        },
        {
          label: "所选机构部门账号",
        },
      ];
      this.nextLevelList = [];
      this.leftList = [
        {
          value: "1",
          name: "机构部门账号",
        },
      ];
    } else if (option.id == 2 && this.accountId == 2) {
      this.levelVisible = false;
      this.leftList = [
        {
          value: "1",
          name: "人员账号",
        },
      ];
      this.rightTitle = "";
    }
  },
  methods: {
    selectHandle(val) {
      this.activeId = 0;
      this.selectId = val;
      switch (val) {
        // 选择左侧
        case 1:
          if (this.nbTitle == "内部通讯录" && this.accountId == 1) {
            this.popupConfig = {};
            this.selectList = [
              {
                value: "1",
                name: "机构部门账号",
              },
            ];
            this.selectData = [
              {
                value: "1",
                name: "机构部门账号",
              },
            ];
          } else if (this.nbTitle == "内部通讯录" && this.accountId == 2) {
            this.popupConfig = {};
            this.selectList = [
              {
                value: "1",
                name: "人员账号",
              },
            ];
            this.selectData = [
              {
                value: '1',
                name: '人员账号'
              }
            ]
          } else {
            this.popupConfig = {
              width: "22.4rpx",
              height: "28rpx",
              img: require("@/static/images/range.png"),
              label: "选择范围",
            };
            this.selectList = [
              {
                value: "1",
                name: "选择省",
              },
              {
                value: "2",
                name: "选择市",
              },
              {
                value: "3",
                name: "选择区县",
              },
              {
                value: "4",
                name: "选择街道",
              },
            ];
            this.selectData = [
              {
                value: "1",
                name: "广东省",
              },
              {
                value: "2",
                name: "福建省",
              },
              {
                value: "3",
                name: "湖南省",
              },
            ];
          }
          break;
        // 选择右侧
        case 2:
          this.popupConfig = {
            width: "28rpx",
            height: "28rpx",
            img: require("@/static/images/jigou.png"),
            label: "选择机构",
          };
          this.selectList = [
            {
              value: "1",
              name: "一级机构",
            },
            {
              value: "2",
              name: "二级机构",
            },
          ];
          this.selectData = [
            {
              value: "1",
              name: "一级机构",
            },
            {
              value: "2",
              name: "一级机构1",
            },
          ];
          break;
      }
    },
    // tab选择
    selectTab(val, index) {
      this.activeId = index;
      if (this.selectList[index - 1].name == "广东省") {
        this.selectData = [
          {
            value: "11",
            name: "广州市",
          },
          {
            value: "12",
            name: "深圳市",
          },
          {
            value: "13",
            name: "清远市",
          },
        ];
      } else if (this.selectList[index - 1].name == "广州市") {
        this.selectData = [
          {
            value: "111",
            name: "天河区",
          },
          {
            value: "112",
            name: "黄埔区",
          },
          {
            value: "113",
            name: "白云区",
          },
        ];
      } else if (this.selectList[index - 1].name == "天河区") {
        this.selectData = [
          {
            value: "1111",
            name: "石牌街道",
          },
          {
            value: "1112",
            name: "林和街道",
          },
          {
            value: "1113",
            name: "龙洞街道",
          },
        ];
      } else if (this.selectList[index - 1].name == "一级机构") {
        this.selectData = [
          {
            value: "11",
            name: "二级机构",
          },
          {
            value: "12",
            name: "二级机构1",
          },
        ];
      }
    },

    // 列表单选
    radioChange(val) {
      this.selectData.map((ele) => {
        if (ele.value == val) {
          this.selectList[this.activeId].name = ele.name;
        }
      });
    },

    // 确定选择
    submit(val, data) {
      if (this.selectId == 1) {
        this.leftList = data;
      } else {
        this.rightTitle = data[data.length - 1].name;
      }
      console.log("val", val);
    },

    // 选择部门
    showDetail(val) {
      this.departmentName = val.label;
      this.levelVisible = true;
    },
    // 选择部门
    showDetailItem(val) {
      this.departmentName = val.label;
      this.levelVisible = true;
      this.nextLevelList = [];
    },
  },
};
</script>

<style lang="scss" scoped>
* {
  box-sizing: border-box;
}
.address-book-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  .uni-list {
    display: flex;
    justify-content: center;
    width: 100%;
    &:last-child::before {
      content: "";
      position: absolute;
      width: 1rpx;
      height: 60rpx;
      top: 10rpx;
      left: 50%;
      background: rgba(255, 255, 255, 0.8);
    }
  }
  .select-department {
    width: 100%;
    height: 64rpx;
    background: #027aff;
    font-size: 30rpx;
    color: rgba(255, 255, 255, 0.6);
  }
  .bumen-img {
    width: 32.38rpx;
    height: 28rpx;
    margin: 18rpx 7rpx 0 32rpx;
  }
  .page-header {
    width: 100%;
  }
  .address-book-list {
    width: 100%;
    height: 100%;
    padding: 0 32rpx;
  }

  .contacts-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 32rpx;
    padding: 40rpx 0;
    border-bottom: 1rpx solid #e4e7f0;
  }
  .contacts-img {
    width: 27.48rpx;
    height: 30rpx;
  }
  .account-icon {
    width: 25.54rpx;
    height: 29.24rpx;
    margin-right: 34.46rpx;
  }
  .mechanism-icon {
    width: 36.49rpx;
    height: 26.54rpx;
    margin-right: 28.51rpx;
  }
  .division-img {
    width: 27.53rpx;
    height: 28.29rpx;
  }

  .contacts-label {
    padding-left: 32.68rpx;
    font-size: 30rpx;
    color: #2b2b2b;
  }

  .iconfont {
    color: #027aff;
  }

  .detail-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 32rpx;
    border-bottom: 1rpx solid #e4e7f0;
    .icon-hujiao {
      color: #d3d3d3;
    }
  }
  .detail-cont {
    display: flex;
    align-items: center;
    .icon-zhanghao,
    .icon-jigouzhanghao {
      color: #027aff;
      margin-right: 34.46rpx;
    }
  }
  .detail-label {
    padding: 25rpx 0;
  }
  .detail-name {
    font-size: 30rpx;
    color: #2b2b2b;
  }
  .detail-job {
    font-size: 24rpx;
    color: rgba(43, 43, 43, 0.5);
  }
}
</style>
